<template>
  <div class="about">
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="850">
        <el-table-column
          fixed
          prop="name"
          label="项目名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="lineCoverage"
          label="行级代码覆盖率（%）"
          width="220">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="scope.row.lineCoverage"
              :status="scope.row.lineCoverage === 100 ? 'success' : null">
            </el-progress>
          </template>
        </el-table-column>
        <el-table-column
          prop="branchCoverage"
          label="分支代码覆盖率（%）"
          width="220">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="scope.row.branchCoverage"
              :status="scope.row.branchCoverage === 100 ? 'success' : null">
            </el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="报告地址"
          width="150">
          <template slot-scope="scope">
            <a :href="scope.row.reportUrl" target="_blank">报告地址</a>
            <br>
            <a :href="scope.row.mergeReportUrl" v-if="scope.row.mergeReportUrl" target="_blank"
            >合并报告地址</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="logFile"
          label="日志文件"
          width="100">
          <template slot-scope="scope">
            <a :href="scope.row.logFile" target="_blank">日志文件</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="报告生成时间"
          width="180">
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="errMsg"-->
<!--          label="操作"-->
<!--          width="120">-->
<!--          <template v-slot="scope">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              @click="handleClick(scope.row.uuid)" style="stroke-width:-12"-->
<!--              icon="el-icon-refresh-left">-->
<!--              执行统计</el-button>-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              @click="handleClick(scope.row.uuid)" style="margin-left: 0;margin-top: 2px"-->
<!--              icon="el-icon-edit">-->
<!--              添加备注</el-button>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
          prop="errMsg"
          label="错误信息"
          width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.errMsg" type="text" @click="setErrMsg(scope.row.errMsg)">
              查看错误信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>{{this.errnoMsg}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>

  </div>
</template>

<script>

export default {
  methods: {
    // eslint-disable-next-line no-unused-vars
    setErrMsg(errMsg) {
      this.dialogVisible = true;
      this.errnoMsg = errMsg;
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        // eslint-disable-next-line no-unused-vars
        .then((_) => {
          done();
        })
        // eslint-disable-next-line no-unused-vars
        .catch((_) => {});
    },
    handleClick(row) {
      // eslint-disable-next-line no-console
      console.log(row);
    },
    getReportList() {
      this.$getRequest.get('/cov/getEnvCoverResultList?pageIndex=1&pageSize=20')
        .then((resp) => {
          // eslint-disable-next-line no-console
          console.log(resp.data.data.list);
          // eslint-disable-next-line prefer-destructuring
          this.tableData = resp.data.data.list;
          // eslint-disable-next-line no-console
          console.log('测试数据：');
          // eslint-disable-next-line no-console
          console.log(this.tableData);
        });
    },
  },

  data() {
    return {
      tableData: [],
      dialogVisible: false,
      errnoMsg: '',
    };
  },
  created() {
    // eslint-disable-next-line no-undef
    this.getReportList();
  },
};
</script>

<style scoped>
.about {
  margin-left: 300px;
  margin-top: -10px;
}
</style>
